<template>
	<h1>我是Car页面</h1>
	<RouterLink to="/car/add">add</RouterLink> |
	<RouterLink to="/car/list">list</RouterLink>
	<RouterView/>
	
	<!-- <el-form ref="myFrom" :model="formData" :rules="rules">
		<el-form-item prop="userName" label="用户名">
			<el-input v-model="formData.userName"></el-input>
		</el-form-item>
		<el-form-item prop="pwd" label="密码">
			<el-input v-model="formData.pwd"></el-input>
		</el-form-item>
		<el-form-item prop="email" label="邮箱">
			<el-input v-model="formData.email"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="confirmFn(myFrom)">确定</el-button>
		</el-form-item>
	</el-form>
	<el-transfer @change="changeFn" v-model="value" :data="data" />
	 -->
	<el-table :data="tableData" @selection-change="changeSe">
		<el-table-column type="index" label="序号" width="100"></el-table-column>
		<el-table-column type="selection"></el-table-column>
		<el-table-column prop="userName" label="用户名">
			<template #header>
				<el-button>用户名</el-button>
			</template>
			<template #default="scoped">
				<input type="checkbox"/>
				{{scoped.row.userName}},
				{{scoped.$index+1}}
			</template>
			
		</el-table-column>
		<el-table-column prop="tel" label="电话"></el-table-column>
		<el-table-column prop="address" label="地址"></el-table-column>
	</el-table>
	
	<el-pagination layout="prev,pager,next" v-model:current-page="page" :total="total" :page-size="pageSize" @change="pageChange"></el-pagination>
	<button @click="open">弹出s</button>
</template>

<script setup>
	import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
	import { RouterLink, RouterView, useRouter } from 'vue-router'
	let myFrom=ref(null);
	let value=ref([]);
	let page=ref(1)
	let pageSize=ref(5);
	let total=ref(20)
	
	function changeSe(val){
		console.log(val)
	}
	function open(){
		ElMessage({
			type:"success",
			message:"cuowu"
		})
	}
	let tableData=ref([
		{
			userName:"张三",
			tel:199384,
			address:"北京"
		},
		{
			userName:"里斯",
			tel:18989923,
			address:"石家庄"
		}
	])
	function pageChange(page){
		console.log(page)
	}
	let data=ref([
		{
			key: 10,
			label: "a",
		},
		{
			key: 20,
			label: "b",
		},
	])
	
	function changeFn(value){
		console.log(value)
	}
	
	
	let formData=reactive({
		userName:"",
		pwd:"",
		email:""
	})
	const checkPwd=(rule,value,callback)=>{
		//console.log(value)
		const reg=/^[0-9]{6}$/
		if(!reg.test(value)){
			callback(new Error("密码只能是6位数字"))
		}else{
			callback();
		}
		
	}
	let rules=reactive({
		userName:[
			{
				required:true,
				message:"用户名不能为空",
				trigger:"change"
			},
			
		],
		pwd:[
			{
				required:true,
				message:"密码不能为空",
				trigger:"change"
			},
			{
				trigger:"change",
				validator:checkPwd
			}
		],
		email:[
			{
				required:true,
				message:"邮箱不能为空",
				trigger:"change"
			},
			{
				type:"email",
				message:"邮箱格式错误",
				trigger:"change"
			},
		]
	})
	const confirmFn=(myFrom)=>{
		myFrom.validate((valid)=>{
			console.log(valid)
		})
	}
</script>

<style scoped>
	
</style>